<polymer-element name="card-tester" attributes="value suit faceup flippable card valueInput cardheight cardwidth angle anglestep anglemax originx originy">
  <template>
    <style>
      ul {
      list-style-type:none;
      }
      label {
      width:100%;
      display:inline-block;
      overflow:hidden;
      }
    </style>
    <ul>
      <li>
    <label for="lockratio">Lock Ratio:</label>
    <input id="lockratio" type="checkbox" checked="checked"><span>{{ratio}}</span>
    </li>
      <li>
    <label for="widthInput">Width:</label>
    <input id="widthInput" type="range" min="10" max="1800" value="{{cardwidth}}"><span>{{cardwidth}}</span>
    </li>
      <li>
    <label for="heightInput">Height:</label>
    <input id="heightInput" type="range"  min="10" max="1800" value="{{cardheight}}"><span>{{cardheight}}</span>
    </li>
      <li>
    <label for="angleInput">Angle:</label>
    <input id="angleInput" type="range"  min="0" max="{{anglemax}}" step="{{anglestep}}" value="{{angle}}"><span>{{angle}}</span>
    <input id="originYInput" type="range"  min="0" max="100" value="{{originy}}"><span>{{originy}}%</span>
    <input id="originXInput" type="range"  min="0" max="100" value="{{originx}}"><span>{{originx}}%</span>
    </li>
    </ul>
  </template>
  <script>
    Polymer('card-tester', {
        cardheight:200,
        cardwidth:144,
        fontsize:20,
        lockedRatio:true,
        angle:0,
        anglestep:1,
        anglemax:360,
        originx:50,
        originy:50,
        created: function() {
            // export tester internals for interactive testing
            this.valueInput = this.$.valueInput;
            this.ratio = this.cardwidth / this.cardheight;

            // why do I have to do this? This bug: https://github.com/Polymer/mdv/issues/97
            this.$.lockratio.onchange = function(e) {
                this.lockedRatio = e.currentTarget.checked;
            }.bind(this);
        },
        cardheightChanged: function() {
           if (this.lockedRatio) {
              this.cardwidth = Math.round(this.cardheight * this.ratio);
           } else {
              this.ratio = this.cardwidth / this.cardheight;
           }
        },
        cardwidthChanged: function() {
           if (this.lockedRatio) {
              this.cardheight = Math.round(this.cardwidth / this.ratio);
           } else {
              this.ratio = this.cardwidth / this.cardheight;
           }
        },
    });
  </script>
</polymer-element>
